<template>
    <el-row class="header">
        <el-col :span="6" class="tac">
            <img src="http://www.filmwhite.com/IMG/logo.png" alt="聚像传媒" title="聚像传媒" class="logo">
        </el-col>
        <el-col :span="14" class="nav-box">
            <router-link class="router-link" v-for="(item, index) in $router.options.routes" v-if="!item.hidden" :to="item.path" :key="index">{{item.meta.title}}</router-link>
        </el-col>
        <el-col :span="4" class="tac">
            <!-- <a href="https://weibo.com/u/6440610774" target="_blank">
                <img src="/img/weibo.png" alt="聚象传媒微博" title="聚象传媒微博" class="icon">
            </a> -->
            <span class="wx-icon">
                <img src="/img/wechat.png" alt="聚象传媒微信" class="icon">
                <div class="qr-code">
                    <img src="/img/wx-qr.jpg" alt="">
                </div>
            </span>
            <a href="http://wpa.qq.com/msgrd?v=3&uin=203455813&site=qq&menu=yes" target="_blank">
                <img src="/img/qq.png" alt="聚象传媒QQ" title="聚象传媒QQ" class="icon">
            </a>
        </el-col>
    </el-row>
</template>
<script>
export default {
    data: function() {
        return{}
    }
}

</script>
<style scoped>
.header {
    height: 80px;
    line-height: 80px;
    position: relative;
    z-index: 1000;
    top: 0;
    left: 0;
}

.logo {
    height: 60px;
    vertical-align: middle;
}


.nav-box {
    text-align: center;
    height: 80px;
    overflow: hidden;
}

.router-link {
    display: inline-block;
    margin: 0 30px;
    text-decoration: none;
    color: #2185c6;
    font-size: 20px;
    transition: all linear .1s;
}
.router-link-active {
    font-weight: bold;
    color: #ff7f66;
}
.router-link:hover{
    transform: scale(1.2);
    color: #7ecefd;
}

.icon {
    margin: 0 5px;
    height: 32px;
    vertical-align: middle;
}
.wx-icon{
    position: relative;
    cursor: pointer;
}
.wx-icon:hover .qr-code{
    display: block;
}
.qr-code{
    display: none;
    position: absolute;
    top: 40px;
    left: -50px;
}
</style>
